@activeColor:#181b2a;
@headAHoverColor:#7a98f7;

.flex(@h:space-between, @v:center){
    display: -webkit-flex;
    display: flex;
    align-items: @v;
    justify-content: @h;
}

.sameSize(){
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
}


.web-btn{
    line-height: 38px;
    min-width: 102px;
    text-align: center;
    padding: 0 10px;
    margin-left: 10px;
    border-radius: 3px;
    display: inline-block;
    color: #333;
    background-color: #fff;
    border-color: #ccc;
    font-size: 14px;
    &:hover{
        background: #eee;
        box-shadow: 0 0 5px #efefef;
    }
}
.web-btn.web-sm-btn{
    font-size: 12px;
    line-height:30px;
    min-width: 80px;
}
.web-btn.web-block-btn{
    display: block;
}


//#067eee
.web-btn.web-default-btn{
    background: #067eee;
    color: #fff;
    &:hover{
        background: #0671e1;
    }
}
.web-btn.web-success-btn{
    background: #35c27d;
    color: #fff;
    &:hover{
        background: #2b874d;
    }
}
.web-btn.web-warn-btn{
    background: #f35959;
    color: #fff;
    &:hover{
        background: #c14c4c;
    }
}
.web-btn.web-info-btn{
    background: #46b8da;
    color: #fff;
    &:hover{
        background: #459ec0;
    }
}



.home-header{
    position: relative;
    .banner{
        height: 580px;
        position: relative;
        .item{
            .sameSize();
            background-position: center top;
            background-repeat: no-repeat;
            display: none;
            a{
                .sameSize();
            }
        }
        .pagination{
            position: absolute;
            left:0;
            right:0;
            bottom:20px;
            text-align: center;
            font-size: 0;
            z-index: 222;
            span{
                display: inline-block;
                width: 12px;
                height: 12px;
                border-radius: 12px;
                background: rgba(255,255,255,0.2);
                margin: 0 8px;
                cursor: pointer;
                &.active{
                    background: rgba(255,255,255,0.8);
                }
            }
        }
    }
    .head{
        position: absolute;
        left: 0;
        right:0;
        top:20px;
        .flex(space-between,stretch);
        padding: 0 35px;
    }
}
.headFixed{
    padding-top: 60px;
    &.home-body{
        padding-top: 0;
    }
}
.headCommon #header{
    -webkit-animation: headCAnimation 0.3s;
    -moz-animation: headCAnimation 0.3s;
    animation: headCAnimation 0.3s;
}
.headFixed #header{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    background: rgba(17,21,69,0.9);
    height: 60px;
    z-index:999;
    box-shadow: 0 3px 5px rgba(0,0,0,0.3);
    -webkit-animation: headAnimation 0.3s;
    -moz-animation: headAnimation 0.3s;
    animation: headAnimation 0.3s;
}
@-webkit-keyframes headAnimation {
    0%{
        opacity: 0;
        -webkit-transform: translateY(-100px);
    }
    100%{
        opacity: 1;
        -webkit-transform: translateY(0px);
    }
}
@-moz-keyframes headAnimation {
    0%{
        opacity: 0;
        -moz-transform: translateY(-100px);
    }
    100%{
        opacity: 1;
        -moz-transform: translateY(0px);
    }
}
@keyframes headAnimation {
    0%{
        opacity: 0;
        transform: translateY(-100px);
    }
    100%{
        opacity: 1;
        transform: translateY(0px);
    }
}
@-webkit-keyframes headCAnimation {
    0%{
        -webkit-transform: translateY(50px);
    }
    100%{
        -webkit-transform: translateY(0px);
    }
}
@-moz-keyframes headCAnimation {
    0%{
        -moz-transform: translateY(50px);
    }
    100%{
        -moz-transform: translateY(0px);
    }
}
@keyframes headCAnimation {
    0%{
        transform: translateY(50px);
    }
    100%{
        transform: translateY(0px);
    }
}
.wrapper{
    width: 1200px;
    margin: 0 auto;
    padding-left: 15px !important;
    padding-right: 15px !important;
}
.header-left{
    .flex();
    .logo{
        font-size: 0;
        img{
            vertical-align: top;
        }
    }
    ul{
        .flex();
        padding-left:30px;
    }
    li{
        margin: 0 37px;
        a{
            color: #c7cce6;
            &:hover{
                color: @headAHoverColor;
            }
        }
        &.active a{
            color: @headAHoverColor;
        }
    }
}
.header-right{
    .flex(flex-start,stretch);
    .header-right-item{
        position: relative;
        .flex(center,center);
        &>a,.language{
            margin: 0 15px;
            color: #c7cce6;
            &:hover{
                color: @headAHoverColor;
            }
        }
        &>a{
            padding-left:20px;
            background-position: left center;
            background-repeat: no-repeat;
            &.special{
                padding-left: 0;
            }
        }
    }
    .asset-center{
        background-image: url(../images/basic/asset-icon.png);
    }
    .order{
        background-image: url(../images/basic/order-icon.png);
    }
    .username {
        background-image: url(../images/basic/member-icon.png);
    }
    .edge-item{
        position: relative;
        padding-right:12px;
        &::after{
            position: absolute;
            content: '';
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 4px solid #c7cce6;
            right: 0;
            top: 50%;
            margin-top: -2px;
        }
        &:hover::after{
            border-top-color: @headAHoverColor;
        }
    }
    .language{
        border: 1px solid #c7cce6;
        line-height:22px;
        padding: 0 14px;
        border-radius: 24px;
        cursor: pointer;
        .flex();
        .icon{
            background: url(../images/basic/arrow.png);
            width: 11px;
            height: 6px;
            margin-left:5px;
        }
        &:hover{
            border-color: @headAHoverColor;
            color: @headAHoverColor;
            .icon{
                background: url(../images/basic/arrow-hover.png);
            }
        }
        &.active{
            border-color: @headAHoverColor;
            color: @headAHoverColor;
            .icon{
                background: url(../images/basic/arrow-hover.png);
            }
        }
    }
    .head-menu{
        position: absolute;
        top:100% + 1px;
        right:0;
        background: #0f0f33;
        border-radius: 4px;
        overflow: hidden;
        display: none;
        z-index: 222;
        box-shadow: 0 0 5px rgba(0,0,0,0.4);
    }
    .language-list{
        text-align: center;
        padding: 10px 0;
        width: 210px;
        .item{
            width: 50%;
            float: left;
            a{
                font-size: 12px;
                color: #c0c5df;
                display: block;
                &:hover{
                    color: #fff;
                }
            }
        }
    }
    .head-member-cont{
        width: 260px;
        &.asset-menu{
            width: 220px;
        }
        .vip{
            text-align: center;
            padding-top:17px;
            span{
                display: inline-block;
                background: url(../images/basic/vip.png) no-repeat;
                height: 28px;
                padding-left:40px;
                color: #fff;
                text-transform: uppercase;
                line-height:28px;
                font-size: 12px;
            }
        }
        .protect-setting-notice{
            color: #c7cce6;
            padding: 8px 25px 18px;
            &>div{
                line-height:18px;
                font-size: 12px;
                padding-bottom: 12px;
            }
            &>a{
                display: block;
                height: 32px;
                line-height:30px;
                border: 1px solid #7a98f7;
                border-radius: 2px;
                text-align: center;
                color: #7a98f7;
                font-size: 12px;
                &:hover{
                    border-color: #6972d1;
                }
            }
        }
        .quick-menu-list{
            li{
                border-bottom: 1px solid #1c2455;
                &:last-of-type{
                    border-bottom: none;
                }
            }
            a{
                display: block;
                height: 50px;
                .flex(flex-start,center);
                color: #a4a8c1;
                padding-left:25px;
                span{
                    margin-left:12px;
                }
                .iconfont{
                    font-size: 20px;
                }
                &:hover{
                    color: @headAHoverColor;
                    background: #1c2455;
                }
                &.active{
                    background: #1c2455;
                    color: @headAHoverColor;
                }
            }
        }
    }
}
.latest-news{
    height: 54px;
    background: #111546;
    line-height:54px;
    color: #fff;
    text-align: center;
    overflow: hidden;
    .item{
        .flex(center,center);
        span{
            color: @headAHoverColor;
            margin-right:12px;
        }
        a{
            color: #fff;
        }
    }
}
.currency-list{
    margin: 30px 50px 0;
    .tab-title{
        .flex(space-between,flex-start);
        .tab-cate-cont{
            .flex(flex-start,flex-start);
            border-left: 1px solid #d1d3df;
            position: relative;
            font-size: 0;
            a{
                font-size: 14px;
                text-align: center;
                .flex(center,center);
                width: 180px;
                height: 36px;
                text-transform: uppercase;
                background: #fff;
                border-top: 1px solid #d1d3df;
                border-right: 1px solid #d1d3df;
                -webkit-user-select: none;
                -moz-user-select: none;
                user-select: none;
                &.active{
                    position: relative;
                    &::after{
                        position: absolute;
                        content: '';
                        left: 0;
                        right: 0;
                        bottom: -1px;
                        z-index: 222;
                        height: 1px;
                        background: #ffffff;
                    }
                }
                img{
                    margin-right: 10px;
                }
            }
        }
        .search{
            position: relative;
            height: 30px;
            width: 200px;
            line-height: 30px;
            border: 1px solid #d1d3df;
            background-color: #fff;
            .flex(center,center);
            .icon{
                background: url(../images/basic/search-icon.png);
                width: 14px;
                height: 14px;
                margin-right: 5px;
            }
            .search-input{
                border: none;
                background: transparent;
                left: 0;
                top: 0;
                bottom: 0;
                width: 100%;
                padding: 0 25px;
                position: absolute;
                outline: none;
            }
            &.active{
                .flex(flex-start,center);
                span{
                    display: none;
                }
                .icon{
                    margin-left: 6px;
                }
            }
        }
    }
    .tab-cont{
        border: 1px solid #d1d3df;
        background: #fff;
        .list-head,.list-item{
            .flex();
            .col{
                &:first-of-type{
                    padding-left: 25px;
                }
                &:last-of-type{
                    .flex(center,center);
                }
                flex: 1;
                padding: 0 20px;
                line-height: 48px;
                .flex(flex-start,center);
                text-transform: uppercase;
            }
        }
        .list-head{
            .col{
                border-bottom: 1px solid #e9e9e9;
                color: #636880;
            }
        }
    }
    .tab-item{
        overflow: hidden;
        display: none;
        .list-item{
            line-height: 50px;
        }
        .status-dir{
            margin-left: 5px;
        }
        .italic{
            color: #666;
            margin: 0 5px;
        }
        .weight{
            margin-left: 5px;
        }
        .light{
            color: #666;
        }
        .transaction-btn{
            display: inline-block;
            line-height: 24px;
            background: #3093ec;
            color: #fff;
            font-size: 13px;
            padding: 0 10px;
            border-radius: 20px;
            &:hover{
                background: #2B7AC5;
            }
        }
    }
}
.yellow{
    color: #ff7200;
}
.green{
    color: #4db872;
}
.advantage{
    margin-top: 30px;
    .advantage-title{
        text-align: center;
        line-height: 1;
        .main-title{
            font-size: 32px;
            color: #48515c;
            padding: 16px 0;
            font-weight: bold;
            span{
                margin: 0 25px;
            }
        }
        .sub-title{
            font-size: 18px;
            color: #9ea8b4;
            span{
                margin: 0 8px;
            }
        }
    }
    .advantage-list{
        margin-top: 26px;
        .flex(center,center);
        .list-item{
            width: 280px;
            height: 280px;
            margin: 0 13px;
            background: #ffffff;
            border-radius: 8px;
            overflow: hidden;
        }
        .icon{
            width: 98px;
            height: 98px;
            position: relative;
            .flex(center,center);
            margin: 38px auto 0;
            img{
                position: relative;
                z-index: 3;
            }
            &::after{
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                content: '';
                background: -moz-linear-gradient(top, #2568ff, #5097ff);
                background: -webkit-linear-gradient(top, #2568ff, #5097ff);
                background: linear-gradient(top, #2568ff, #5097ff);
                opacity: 0.7;
                border-radius: 16px;
            }
            &::before{
                position: absolute;
                left: 10px;
                top: 25px;
                right: 10px;
                height: 78px;
                content: '';
                background: -moz-linear-gradient(top, #2568ff, #5097ff);
                background: -webkit-linear-gradient(top, #2568ff, #5097ff);
                background: linear-gradient(top, #2568ff, #5097ff);
                opacity: 0.5;
                border-radius: 20px;
                z-index: 2;
            }
        }
        .name{
            text-align: center;
            font-size: 16px;
            line-height: 34px;
            position: relative;
            margin-top: 28px;
            &::after{
                position: absolute;
                left: 50%;
                margin-left: -9px;
                bottom: 0;
                height: 3px;
                width: 18px;
                background: #f6be62;
                content: '';
            }
        }
        .text{
            margin-top: 10px;
            line-height: 18px;
            color: #999999;
            font-size: 12px;
            padding: 0 50px;
            text-align: center;
        }
    }
    .app-list{
        margin-top: 40px;
        .flex(center,center);
        .down-item{
            margin: 0 100px;
            a{
                .flex();
                padding: 0 25px;
                height: 60px;
                background: #4785dc;
                color: #fff;
                font-size: 18px;
                border-radius: 6px;
                &:hover{
                    background: #2B7AC5;
                }
                img{
                    margin-right: 24px;
                }
            }
        }
    }
}
.app-download{
    padding-bottom:65px;
}
.reg-entrance{
    margin-top: 45px;
    background: #4785dc;
    .flex(center,stretch);
    .entrance-right{
        margin-top: 88px;
        color: #ffffff;
        .main-title{
            font-size: 32px;
            line-height: 1;
        }
        .sub-title{
            margin-top: 20px;
            line-height: 20px;
            padding-bottom: 25px;
        }
        .reg-btn{
            display: inline-block;
            line-height: 50px;
            background: #ffffff;
            border-radius: 6px;
            min-width: 168px;
            text-align: center;
            color: #4785dc;
            font-size: 18px;
        }
    }
}
.footer{
    font-size: 12px;
    .footer-top{
        padding: 25px 120px;
        background: #181b2a;
        .flex(space-between,flex-start);
        .left{
            img{
                opacity: 0.3;
            }
            div{
                font-size: 12px;
                color: #32364c;
                line-height: 1;
                letter-spacing: 3px;
            }
        }
        .right{
            .flex(flex-start,flex-start);
        }
        .fast-link-item{
            width: 160px;
            margin-left: 20px;
            .link-title{
                font-weight: bold;
                font-size: 12px;
                color: #61688a;
            }
            .link-list{
                a{
                    color: #acb0c9;
                    &:hover{
                        text-decoration: underline;
                        color: #D2D6EF;
                    }
                }
            }
        }
        .contact-us{
            color: #acb0c9;
            width: 200px;
            .contact-us-cont{

            }
        }
        .share{
            .flex(flex-start,flex-start);
            margin-top: 6px;
            a{
                width: 20px;
                height: 20px;
                border-radius: 20px;
                margin-right: 10px;
                background: #61688a url(../images/basic/foor-icon1.png) no-repeat center;
                &:nth-of-type(2){
                    background-image: url(../images/basic/foor-icon2.png);
                }
                &:nth-of-type(3){
                    background-image: url(../images/basic/foor-icon3.png);
                }
                &:nth-of-type(4){
                    background-image: url(../images/basic/foor-icon4.png);
                }
                &:hover{
                    background-color: #8195B8;
                }
            }
        }
    }
    .footer-bottom{
        padding: 18px 100px;
        background: #1a1d30;
    }
    .friend-link{
        color: #bcc0da;
        font-size: 0;
        line-height: 20px;
        span,a{
            font-size: 12px;
            display: inline-block;
            margin-left: 20px;
            color: #bcc0da;
        }
        a:hover{
            color: #dae0fa;
        }
    }
    .copyright{
        line-height: 1;
        margin-top: 5px;
        padding: 0 20px;
        color: #9397b2;
    }
}
.inner-header{
    height: 70px;
    .flex(space-between,stretch);
    padding: 0 35px;
    background-color: #111545;
}
.trade-box{
    background-color: #ffffff;
    border: 1px solid #e9e9e9;
    box-shadow: 0 0 3px rgba(0,0,0,0.1);
    border-radius: 3px;
}
.trade-center{
    .flex(flex-start,flex-start);
    margin: 20px 30px;
    .trade-left{
        flex: none;
        width: 408px;
        .trade-currency{
            .search{
                .flex(center,center);
                padding: 15px;
                span{
                    margin-right: 15px;
                    color: #b6b6b6;
                }
                .search-input{
                    height: 38px;
                    border: 2px solid #efefef;
                    border-radius: 2px;
                    width: 250px;
                    line-height: 34px;
                    padding: 0 10px;
                    outline: none;
                }
            }
            .trade-currency-tab{
                .tab-title{
                    border-bottom: 2px solid #e8e8e8;
                    .flex(center,center);
                    a{
                        line-height: 46px;
                        font-size: 16px;
                        margin: 0 25px;
                        text-transform: uppercase;
                        position: relative;
                        padding: 0 4px;
                        &::after{
                            position: absolute;
                            content: '';
                            left: 0;
                            right: 0;
                            bottom: -2px;
                            z-index: 2;
                            height: 2px;
                            background: transparent;
                        }
                        &.active::after{
                            background: #5495f3;
                        }
                    }
                }
            }
            .trade-currency-list{
                .list-head{
                    .flex();
                    .col{
                        flex: 1;
                        text-align: center;
                        height: 56px;
                        line-height: 1;
                        .flex(center,center)
                    }
                    .changeCurrencyList{
                        font-size: 16px;
                        color: #888;
                        position: relative;
                        padding-right: 12px;
                        &::after,&::before{
                            position: absolute;
                            width: 0;
                            height: 0;
                            content: '';
                            right: 0;
                            border-left: 4px solid transparent;
                            border-right: 4px solid transparent;
                        }
                        &::after{
                            border-top: 5px solid #666666;
                            bottom: 2px;
                        }
                        &::before{
                            border-bottom: 5px solid #666666;
                            top: 2px;
                        }
                    }
                    .changeCurrencyList.sort-up{
                        &::before{
                            border-bottom-color: #5495f3;
                        }
                    }
                    .changeCurrencyList.sort-down{
                        &::after{
                            border-top-color: #5495f3;
                        }
                    }
                }
                .tab-item{
                    .tab-item-list{
                        height: 52px;
                        .flex();
                        .col{
                            flex: 1;
                            text-align: center;
                            text-transform: uppercase;
                        }
                        .italic{
                            color: #666;
                            margin: 0 5px;
                        }
                        .weight{
                            margin-left: 5px;
                        }
                        .light{
                            color: #666;
                        }
                        &:hover{
                            background-color: #f1f5ff;
                            position: relative;
                            &::after{
                                position: absolute;
                                content: '';
                                width: 4px;
                                left: 0;
                                top: 0;
                                bottom: 0;
                                background-color: #5495f3;
                            }
                        }
                    }
                }
            }
        }
    }
    .trade-msg{
        margin-top: 20px;
        .trade-msg-title{
            padding: 0 25px;
            line-height: 50px;
            background-color: #e9e9e9;
            font-size: 16px;
        }
        .trade-msg-list{
            padding: 10px 25px;
            li{
                padding-left: 25px;
                position: relative;
                line-height: 38px;
                &::after{
                    background-color: #e9e9e9;
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 50%;
                    margin-top: -3px;
                    width: 6px;
                    height: 6px;
                    border-radius: 6px;
                }
            }
        }
    }
    .trade-right{
        flex: auto;
        margin-left: 20px;
    }
    .trade-right-bottom{
        margin-top: 20px;
        .flex(flex-start,flex-start);
        .left{
            flex: auto;
        }
        .right{
            width: 358px;
            margin-left: 20px;
            flex: none;
        }
        .online-trade{
            .tab-title{
                border-bottom: 2px solid #f2f2f2;
                padding: 0 10px;
                .flex();
                .online-trade-cate{
                    .flex(flex-start,flex-start);
                    a{
                        line-height: 50px;
                        margin: 0 30px;
                        font-size: 16px;
                        position: relative;
                        &.active{
                            color: #5495f3;
                            &::after{
                                position: absolute;
                                content: '';
                                left: 0;
                                right: 0;
                                bottom: -2px;
                                height: 2px;
                                background-color: #5495f3;
                            }
                        }
                    }
                }
                .rates{
                    padding-right: 30px;
                    a{
                        color: #8bb3f6;
                    }
                }
            }
            .tab-cont{
                padding: 10px 40px 35px;
            }
            .tab-item{
                .flex(flex-start,flex-start);
                .buy{
                    margin-right: 20px;
                }
                .sell{
                    margin-left: 20px;
                }
                .trade-behavior{
                    flex: 1;
                }
            }
            .trade-behavior-item{
                .head{
                    line-height: 1;
                    padding: 25px 0 15px;
                    color: #7a7a7a;
                }
                .current-price{
                    height: 52px;
                    .flex();
                    border: 1px solid #e9e9e9;
                    border-radius: 3px;
                    padding: 0 25px;
                    input{
                        border: none;
                        background: transparent;
                        outline: none;
                        font-size: 16px;
                        color: #666666;
                        flex: auto;
                        margin-right: 15px;
                        height: 52px;
                    }
                    span{
                        text-transform: uppercase;
                        color: #cccdd2;
                        font-size: 18px;
                        flex: none;
                    }
                }
                .to-china-price{
                    padding: 0 50px;
                    line-height: 34px;
                    background-color: #e9e9e9;
                    color: #9ea0a9;
                    font-size: 16px;
                }
            }
            .count-line{
                height: 4px;
                margin: 30px 2px 0;
                background-color: #e9e9e9;
                position: relative;
                span{
                    position: absolute;
                    width: 8px;
                    height: 8px;
                    background-color: #e9e9e9;
                    border-radius: 8px;
                    z-index: 2;
                    top: -2px;
                    &:nth-of-type(1){
                        left: -2px;
                    }
                    &:nth-of-type(2){
                        left: calc(25% - 2px);
                    }
                    &:nth-of-type(3){
                        left: calc(50% - 2px);
                    }
                    &:nth-of-type(4){
                        left: calc(75% - 2px);
                    }
                    &:nth-of-type(5){
                        left: calc(100% - 2px);
                    }
                    &.active{
                        background-color: #5696f0;
                    }
                }
                a.drag-btn{
                    position: absolute;
                    width: 8px;
                    height: 8px;
                    background-color: #5696f0;
                    border-radius: 8px;
                    z-index: 4;
                    top: -2px;
                    left: 0;
                    margin-left:-2px;
                    cursor: move;
                    &:focus,&:hover{
                        transition: all 0.1s;
                        transform: scale(2);
                    }
                }
                .percent{
                    height: 4px;
                    z-index: 1;
                    position: absolute;
                    left:0;
                    top:0;
                    background: #5696f0;
                    width: 0;
                }
            }
            .count-range{
                .flex();
                line-height: 1;
                margin-top: 15px;
                color: #ccc;
            }
            .deal-price{
                font-size: 18px;
                margin-top: 15px;
                color: #333;
                span{
                    margin-right: 10px;
                }
            }
            .btn{
                margin-top: 20px;
                a{
                    display: block;
                    line-height: 54px;
                    border-radius: 4px;
                    background-color: #35c27d;
                    color: #fff;
                    font-size: 18px;
                    text-align: center;
                    &:hover{
                        background-color: #269661;
                    }
                }
            }
            .sell .btn a{
                background-color: #f25959;
                &:hover{
                    background-color: #d25555;
                }
            }
        }
    }
    .latest-price{
        .latest-price-title{
            padding: 0 25px;
            line-height: 50px;
            background-color: #e9e9e9;
            font-size: 16px;
            .s{
                font-size: 14px;
                margin-left: 10px;
                color: #666;
            }
        }
        .latest-price-list-head,.list-item{
            .flex();
            .col{
                flex: 1;
                .flex(center,center);
                text-align: center;
                word-break: break-all;
                min-height: 44px;
                padding: 5px;
                flex-wrap: wrap;
                span{
                    line-height: 1.2;
                }
            }
            .s{
                margin-right: 6px;
            }
        }
        .list-item{
            color: #666;
        }
        .latest-price-list-head{
            margin-top: 20px;
            .col{
                height: 34px;
            }
        }
        .list-cont{
            padding: 0 10px 10px;
        }
        .buy{
            padding-top:10px;
            .s{
                color: #35c27d;
            }
        }
        .sell{
            border-bottom: 2px solid #f6f6f6;
            .s{
                color: #f25959;
            }
        }
    }
    .deal-record{
        margin-top:20px;
    }
    .deal-record-list{
        padding: 10px 10px;
        line-height:46px;
        .table{
            width: 100%;
            text-align: center;
            color: #666666;
        }
        thead tr th{
            font-weight: normal;
            color: #333333;
            line-height:32px;
        }
    }
    .delegate{
        margin-top:20px;
        min-height: 500px;
        .delegate-title{
            line-height:50px;
            padding: 0 20px;
            font-size: 16px;
        }
        .table{
            width: 100%;
            text-align: center;
            thead tr th{
                font-weight: normal;
                color: #333333;
                line-height:44px;
                background: #f1f5ff;
            }
        }
    }
}
#trade-currency-list-scroll{
    height: 520px;
    overflow: hidden;
}

.k-line-chart{
    .k-line-chart-head{
        height: 62px;
        .flex(space-around,center);
        border-bottom: 1px solid #efefef;
        span{
            font-size: 16px;
            &.m{
                font-weight: bold;
                color: #86899b;
            }
            i{
                color: #5495f3;
            }
        }
    }
    .k-line-chart-tab{
        .tab-title{
            .flex();
            border-bottom: 1px solid #efefef;
            a{
                flex: 1;
                line-height:58px;
                text-align: center;
                font-size: 16px;
                border-right:1px solid #efefef;
                &:last-child{
                    border-right:none;
                }
                &.active{
                    background: #5495f3;
                    color: #ffffff;
                }
            }
        }
        .tab-cont{
            background-color: #f2f3f8;
            .chart{
                height: 575px;
            }
        }
    }
}

.login{
    min-height: 700px;
    background-color: #090723;
    position: relative;
    .flex(center,center);
    padding: 100px 0 130px;
    canvas{
        position: absolute;
        z-index:1;
        left:0;
        top:0;
        width: 100%;
        height: 100%;
    }
    .login-cont{
        position: relative;
        z-index:2;
        width: 510px;
        .login-title{
            text-align: center;
        }
    }
    .simulate-select{
        flex: auto;
        .flex();
        .select-text{
            flex: auto;
        }
        &::after{
            right: 30px;
            border-top-color: #6974b3;
        }
        .options{
            background-color: #0e0f33;
            border-color: #1c2455;
            border-radius: 20px;
            li{
                color: #ccc;
                &:hover{
                    color: #333;
                }
            }
        }
    }
    .form-item{
        margin-top:30px;
        .flex();
        border-radius: 48px;
        position: relative;
        &.last-form-item{
            margin-top:20px;
            line-height:1;
            a{
                color: #33334f;
                &:hover{
                    color: @headAHoverColor;
                }
            }
        }
        &.form-code-item{
            padding-right: 120px;
            .text{
                border-radius: 46px 0 0 46px;
            }
        }
        &.form-get-code-item{
            .text{
                padding-right: 144px;
            }
        }
        &.form-spe-item{
            margin-top:20px;
            color: #2d2e48;
            line-height:1;
            a{
                color: #556299;
                &:hover{
                    color: @headAHoverColor;
                }
            }
            label{
                padding-left:35px;
                position: relative;
                -webkit-user-select: none;
                -moz-user-select: none;
                user-select: none;
                &::after{
                    position: absolute;
                    content: '';
                    width: 12px;
                    height: 12px;
                    left:12px;
                    top:50%;
                    margin-top:-6px;
                    background-image: url(../images/basic/uncheck.png);
                }
                &.checked::after{
                    background-image: url(../images/basic/checked.png);
                }
                input[type=checkbox]{
                    opacity:0;
                    z-index: -111;
                }
            }
        }
        &.form-spe-last-item{
            .flex(center,center)
        }
    }
    .code{
        position: absolute;
        right:0;
        top:0;
        bottom:0;
        img{
            width: 120px;
            height: 100%;
        }
    }
    .get-code{
        position: absolute;
        right:1px;
        top:1px;
        bottom:1px;
        background-color: #0e1032;
        color: #5294f3;
        width: 120px;
        border-radius: 0 46px 46px 0;
        line-height:44px;
        text-align: center;
        border: none;
        border-left: 1px solid #1b2555;
        outline: none;
        cursor: pointer;
    }
    .text{
        height: 46px;
        background-color: #0e0f33;
        padding: 0 24px;
        border-radius: 46px;
        border:1px solid #1c2455;
        outline: none;
        color: #fff;
        flex: 1;
        line-height:44px;
        &:focus{
            border-color: #6974b3;
            & + .get-code{
                border-left-color: #6974b3;
            }
        }
    }
    .submit-btn{
        height: 46px;
        flex: 1;
        background-color: #5495f3;
        color: #fff;
        font-size: 16px;
        text-align: center;
        border: none;
        border-radius: 46px;
        cursor: pointer;
        outline: none;
        &:hover{
            background-color: #4279c4;
        }
    }
}

.edit-password-success{
    .flex(center,center);
    line-height: 1;
    font-size: 0;
    div{
        font-size: 14px;
        margin-left: 10px;
        color: #6974b3;
        a{
            color: #4d88df;
            &:hover{
                text-decoration: underline;
            }
        }
    }
}

.agree-protocol-cont{
    margin-top:10px;
    color: #999999;
    font-size: 12px;
    line-height:16px;
    a{
        color: #556299;
        &:hover{
            color: @headAHoverColor;
        }
    }
    label{
        padding-left:20px;
        position: relative;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        &::after{
            position: absolute;
            content: '';
            width: 12px;
            height: 12px;
            left:2px;
            top:50%;
            margin-top:-6px;
            background-image: url(../images/basic/sub-protocol.png);
        }
        &.checked::after{
            background-image: url(../images/basic/sub-protocol-c.png);
        }
        input[type=checkbox]{
            opacity:0;
            z-index: -111;
        }
    }
}
.upload-file-item{
    .agree-protocol-cont{
        margin-top: 10px;
        .flex(center,center);
    }
}

.reg-tab{
    .tab-title{
        .flex(flex-start,center);
        margin-top:30px;
        padding: 0 20px;
        a{
            font-size: 16px;
            color: #4d88dd;
            margin-right:60px;
            line-height:38px;
            border-bottom: 2px solid transparent;
            &:hover,&.active{
                border-bottom-color: #4d88df;
            }
        }
    }
    .tab-item{
        display: none;
    }
}
.news-post{
    height: 30px;
    background: url(../images/basic/laba.png) no-repeat left center;
    padding-left: 38px;
    margin: 10px 0;
    line-height: 30px;
    overflow: hidden;
    a{
        color: #a6a7a7;
        &:hover{
            color: @headAHoverColor;
        }
    }
}
.news-banner{
    background: url(../images/basic/news.png) no-repeat center top;
    box-shadow: 0 3px 6px rgba(84,149,243,0.4);
    .news-banner-cont{
        height: 104px;
        .flex(flex-start,center);
        padding-left: 230px;
        span{
            color: #fff;
            font-size: 26px;
            margin-right: 26px;
            animation: textAnimation 0.5s;
            &:nth-of-type(2){
                animation-duration: 0.8s;
            }
            &:nth-of-type(3){
                animation-duration: 1.2s;
            }
        }
    }
}
.news-cont{
    padding-bottom: 30px;
    .news-cate{
        padding: 30px 0;
        .flex(center,center);
        a{
            margin: 0 20px;
            text-align: center;
            line-height: 30px;
            min-width: 84px;
            padding: 0 12px;
            color: #333;
            &.active{
                color: #fff;
                background-color: #5495f3;
            }
            &:hover{
                color: #5495f3;
            }
        }
    }
    .news-item{
        background-color: #ffffff;
        padding: 10px;
        position: relative;
        margin-bottom: 20px;
        &:last-of-type{
            margin-bottom: 0;
        }
        .flex(flex-start,flex-start);
        .img{
            flex: none;
            font-size: 0;
            img{
                vertical-align: top;
            }
        }
        .text{
            flex: auto;
            margin: 0 24px;
        }
        .title{
            line-height: 42px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 16px;
            color: #333;
        }
        .date{
            line-height: 1;
            color: #acacac;
            padding-bottom: 10px;
            border-bottom: 1px solid #e7e7e7;
            position: relative;
            &::after{
                position: absolute;
                width: 34px;
                height: 5px;
                bottom: -1px;
                left: 0;
                background-color: #5495f3;
                content: '';
            }
        }
        .des{
            color: #999999;
            line-height: 24px;
            margin-top: 10px;
            height: 48px;
            overflow: hidden;
            text-overflow:ellipsis;
            -webkit-line-clamp:2;
        }
        a{
            position: absolute;
            right: 30px;
            bottom: 10px;
            color: #73a5f5;
            &:hover{
                color: #627ec4;
            }
        }
    }
}

.news-detail-cont{
    padding: 30px 0;
    .detail-title{
        font-size: 18px;
        text-align: center;
        color: #333;
        line-height: 1;
        padding: 12px 0;
    }
    .detail-date{
        color: #acacac;
        text-align: center;
        line-height: 1;
        padding-bottom: 10px;
        border-bottom: 1px solid #e7e7e7;
    }
    .detail-cont{
        padding: 15px 20px;
    }
    .detail-page{
        margin-top: 15px;
        padding: 0 20px;
        .item{
            .flex(flex-start,center);
            span{
                font-size: 12px;
                background-color: RGB(84,149,243);
                color: #fff;
                line-height: 18px;
                height: 18px;
                padding: 0 10px;
                border-radius: 3px;
                margin-right: 6px;
            }
        }
    }
}

.page{
    .flex(center,center);
    margin-top: 30px;
    span,a{
        width: 30px;
        padding: 0 5px;
        text-align: center;
        line-height: 30px;
        color: #5495f3;
        margin: 0 5px;
        border-radius: 3px;
    }
    a:hover{
        background-color: #e8e8e8;
    }
    span{
        background-color: #5495f3;
        color: #fff;
    }
}

@-webkit-keyframes textAnimation {
    0%{
        opacity: 0;
        -webkit-transform: translateX(150px);
    }
    100%{
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@-moz-keyframes textAnimation {
    0%{
        opacity: 0;
        -moz-transform: translateX(150px);
    }
    100%{
        opacity: 1;
        -moz-transform: translateX(0);
    }
}
@keyframes textAnimation {
    0%{
        opacity: 0;
        transform: translateX(150px);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}


.member-cont{
    background: url(../images/basic/news.png) no-repeat center top;
    padding-top:30px;
    padding-bottom: 25px;
    .head{
        .flex(space-between,flex-start);
        .head-left{
            .flex(flex-start,flex-end);
            .head-left-avatar{
                border: 15px solid #fff;
                border-radius: 2px;
                box-shadow: 0 0 2px rgba(0,0,0,.2);
                font-size: 0;
                img{
                    vertical-align: top;
                    width: 120px;
                    height: 120px;
                }
            }
            .welcome{
                padding-left:20px;
                font-size: 16px;
                line-height:38px;
            }
        }
        .head-right{
            padding-top:30px;
            .log-in-time{
                color: #fff;
                line-height:46px;
                text-align: right;
            }
            .asset{
                .flex();
                margin-top:36px;
                .text{
                    font-size: 16px;
                }
                .btn{
                    margin-left:35px;
                    .flex();
                    a{
                        line-height:38px;
                        min-width: 100px;
                        text-align: center;
                        padding: 0 10px;
                        margin-left:10px;
                        color: #fff;
                        border-radius: 3px;
                        &.withdraw{
                            background: #35c27d;
                            &:hover{
                                background: #2b874d;
                            }
                        }
                        &.recharge{
                            background: #f35959;
                            &:hover{
                                background: #c14c4c;
                            }
                        }
                    }
                }
            }
        }
    }
    .cont{
        margin-top:20px;
        .page-title{
            background: #ffffff;
            line-height:58px;
            border: 1px solid #e7ecf2;
            padding: 0 20px;
            font-size: 18px;
            color: #333;
        }
        .account-security-item{
            &.certified-item .list{
                .list-item .col{
                    flex: 1;
                }
            }
            margin-top:20px;
            border: 1px solid #e7ecf2;
            background: #ffffff;
            .item-head{
                line-height:48px;
                font-size: 16px;
                padding: 0 20px;
                border-bottom: 2px solid #e7ecf2;
                color: #333;
                .flex();
                .item-head-right{
                    font-size: 12px;
                    color: #f35959;
                }
            }
            .list{
                padding: 0 20px;
                .list-item{
                    .flex();
                    line-height:20px;
                    padding: 12px 0;
                    border-bottom: 1px solid #e7ecf2;
                    .col{
                        .flex(flex-start);
                    }
                    &:last-of-type{
                        border-bottom: none;
                    }
                    .name{
                        width: 230px;
                        padding-right:15px;
                        color: #9194a4;
                        flex: none;
                        img{
                            margin-right:6px;
                        }
                    }
                    .value{
                        width: 300px;
                        padding-right:15px;
                        color: #333;
                        flex: none;
                        .security-level{
                            background: #e7ecf2;
                            overflow: hidden;
                            border-radius: 2px;
                            width: 188px;
                            .percent{
                                background: #5495f3;
                                height: 16px;
                                border-radius: 2px;
                            }
                        }
                        .security-level-text{
                            margin-left:10px;
                        }
                    }
                    .des{
                        color: #b2b4bf;
                        font-size: 12px;
                        flex: auto;
                    }
                    .handle{
                        width: 200px;
                        padding-left:15px;
                        flex: none;
                        .flex(flex-end,center);
                        span{
                            margin-left:20px;
                        }
                        a{
                            margin-left:20px;
                            color: #5495f3;
                            &:hover{
                                color: #4a7acd;
                            }
                        }
                    }
                }
            }
        }
    }
}
.success{
    color: #3aab4d;
}
.warn{
    color: #f36464;
}

body.model-body{
    min-width: 0;
}
.model-page{
    padding: 25px 25px 30px;
}
.add-card-form{
    .flex();
    flex-wrap: wrap;
    margin: 0 -10px;
    .model-form-item{
        flex: none;
        width: 50%;
        padding: 0 10px;
        &:first-of-type{
            margin-top: 25px;
        }
        &.model-form-item-special{
            width: 100%;
        }
        .model-btn{
            width: 140px;
            flex: none;
        }
    }
    .address{
        flex: 1;
    }
    .address-detail{
        margin-top:10px;
        .flex();
        .model-text{
            flex: 1;
        }
    }
}
.model-form-item{
    margin-top: 25px;
    &:first-of-type{
        margin-top: 0;
    }
    .item-label{
        line-height: 1;
        padding-bottom: 5px;
        color: #333;
        .warn{
            font-size: 12px;
        }
    }
    .item-control{
        .flex();
        position: relative;
        label.error{
            position: absolute;
            top: 40px;
            line-height: 1;
            color: #b20000;
            font-size: 12px;
        }
        .model-text{
            flex: auto;
            height: 38px;
            line-height: 36px;
            border: 1px solid #dddddd;
            border-radius: 3px;
            padding: 0 10px;
            &:focus{
                border-color: #067eee;
                box-shadow: 0 0 3px rgba(6,140,252,0.3);
            }
            &.error{
                border-color: #b20000;
            }
            &.model-text-special{
                border-radius: 3px 0 0 3px;
            }
            &.model-text-area{
                min-height: 80px;
                line-height:20px;
                padding: 8px 10px;
            }
        }
    }
    .phone-belong{
        padding: 0 5px;
    }
    .get-code{
        background-color: #62a6f5;
        color: #fff;
        cursor: pointer;
        height: 38px;
        line-height: 38px;
        text-align: center;
        flex: none;
        width: 110px;
        font-size: 12px;
        border: none;
        border-radius: 0 3px 3px 0;
        &:hover{
            background-color: #619eec;
        }
        &[disabled=disabled]{
            cursor: not-allowed;
            background-color: #9397b2;
        }
    }
    .model-btn{
        flex: auto;
        background: #067eee;
        line-height: 40px;
        border: none;
        border-radius: 3px;
        box-shadow: 0 0 3px #067eee;
        padding: 0 15px;
        text-align: center;
        outline: none;
        cursor: pointer;
        color: #fff;
        &:hover{
            background: #065dba;
        }
    }
}
.model-page-special{
    .model-special-head{
        height: 145px;
        background: #067eee url(../images/basic/c2-head-02.jpg) no-repeat center top;
        text-align: center;
        color: #fff;
        font-size: 18px;
        word-spacing: 5px;
        padding-top: 100px;
        letter-spacing: 5px;
    }
    .model-special-sub-head{
        text-align: center;
        line-height: 1;
        padding: 20px 0;
        span{
            padding: 0 22px;
            font-size: 16px;
            color: #666;
            position: relative;
            &::after,&::before{
                position: absolute;
                width: 124px;
                height: 1px;
                top: 50%;
                content: '';
                background: #efefef;
            }
            &::after{
                left: 100%;
            }
            &::before{
                right: 100%;
            }
        }
    }
    .model-form-item{
        padding: 0 120px;
    }
    .upload-notice{
        text-align: center;
        font-size: 12px;
        .error{
            color: darkred;
        }
    }
    .upload-file-item{
        ul{
            .flex(space-around,center);
        }
        li{
            flex: none;
            width: 179px;
            height: 114px;
            background-repeat: no-repeat;
            background-position: center;
            background-color: #1c2455;
            position: relative;
            border-radius: 3px;
            overflow: hidden;
            .upload-img{
                width: 100%;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
                position: absolute;
            }
            &.paper-up{
                background-image: url(../images/basic/paper-01.png);
            }
            &.paper-down{
                background-image: url(../images/basic/paper-02.png);
            }
            input[type=file]{
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                z-index: 3;
                opacity: 0;
            }
            .shade{
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                background: rgba(28,36,85,0.5);
                .flex(center,center);
                color: #fff;
                z-index: 2;
                text-align: center;
                .icon{
                    background: url(../images/basic/add.png) no-repeat;
                    width: 45px;
                    height: 45px;
                    display: block;
                    margin: 0 auto;
                }
            }
            &:hover{
                .shade{
                    color: #0975de;
                    background: rgba(28,36,85,0.9);
                    .icon{
                        background: url(../images/basic/add-hover.png) no-repeat;
                    }
                }
            }
        }
    }
}
.google-ewm{
    .flex(space-around,flex-start);
    text-align: center;
    .ewm-item{
        width: 240px;
    }
    .item-head{
        line-height: 1;
        padding-bottom: 10px;
    }
    .item-img{
        font-size: 0;
        img{
            vertical-align: top;
        }
    }
    .item-text{
        line-height: 24px;
        span{
            color: #067eee;
        }
    }
}

.page-asset-center{
    margin-top: 20px;
    .flex(space-between,flex-start);
    .asset-left{
        flex: none;
        width: 218px;
        background-color: #ffffff;
        a{
            display: block;
            border-left: 5px solid #ffffff;
            line-height: 46px;
            color: #222222;
            padding-left: 25px;
            .flex(flex-start,center);
            span{
                margin-left:10px;
            }
            .iconfont{
                font-size: 20px;
            }
            &:hover{
                color: #5795f1;
            }
            &.active{
                background-color: #e7ecf2;
                border-color: #5795f1;
                color: #5795f1;
                font-weight: bold;
            }
        }
    }
    .asset-right{
        flex: auto;
        margin-left: 20px;
        background-color: #ffffff;
        border-bottom: 3px solid #e1e6ef;
        min-height: 450px;
    }
}
.table{
    width: 100%;
    th,td{
        line-height: 24px;
        padding: 10px 8px;
        text-align: center;
    }
    th{
        background-color: #e7ecf2;
        line-height: 28px;
        color: #222222;
        font-weight: normal;
    }
    td{
        border-bottom: 1px solid #e7ecf2;
        a{
            color: #5895f1;
            margin: 0 6px;
            &:hover{
                color: #5182d7;
            }
        }
    }
    tr:hover{
        td{
            background-color: #eef2f7;
        }
    }
    tr.no-hover:hover{
        td{
            background-color: #ffffff;
        }
    }
    .seller{
        .flex(center,center);
        img{
            margin-right:12px;
        }
    }
}
.no-data-row{
    td{
        padding: 0;
    }
    .no-data{
        text-align: center;
        padding: 140px 0;
        background-color: #fff;
        td{
            padding: 0;
        }
        img{
            vertical-align: top;
        }
        div{
            color: #666666;
            line-height: 1;
            margin-top: 20px;
        }
    }
}

.detail-search{
    padding: 15px 24px;
    .search-item{
        padding: 10px 0;
        .flex(flex-start,center);
        .search-item-name{

        }
        .input-control{
            position: relative;
            .icon{
                position: absolute;
                width: 28px;
                height: 30px;
                left: 1px;
                top: 1px;
                content: '';
            }
            .a-icon-date{
                background: url(../images/basic/date-icon.png) no-repeat center center;
            }
        }
        .search-input{
            width: 160px;
            height: 32px;
            line-height: 30px;
            border: 1px solid #cdd6e9;
            border-radius: 3px;
            padding: 0 10px;
            &.date-range-select{
                width: 228px;
                padding: 0 10px 0 28px;
            }
        }
        .fast-search{
            .flex(center,center);
            padding: 0 15px;
            a{
                padding: 0 15px;
                border-radius: 3px;
                &.active{
                    color: @headAHoverColor;
                    background-color: #efefef;
                }
            }
        }
        .search-btn{
            height: 32px;
            line-height: 32px;
            color: #ffffff;
            background: #5795f1;
            min-width: 81px;
            padding: 0 15px;
            border-radius: 3px;
            border: none;
            &:hover{
                background: #4e80d3;
            }
        }
    }
}

.simulate-select{
    position: relative;
    &::after{
        position: absolute;
        content: '';
        top: 50%;
        right: 6px;
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid #b2b2b2;
        margin-top: -2px;
    }
    .options{
        position: absolute;
        display: none;
        left: 0;
        top: calc(100% + 2px);
        right: 0;
        background: #ffffff;
        border: 1px solid #cdd6e9;
        border-radius: 3px;
        max-height: 160px;
        overflow: auto;
        z-index: 22222;
        &::-webkit-scrollbar {
            width: 2px;
            height: 8px;
            background-color: #666;
        }
        &::-webkit-scrollbar-track {
            background-color: #efefef;
        }
        &::-webkit-scrollbar-thumb{
            background:#4a4a4a;
        }
        &.card-options{
            max-height: 210px;
            li{
                .flex(flex-start,center);
                padding: 5px 15px;
                .icon{
                    .flex(flex-start,center);
                    i{
                        font-size: 44px;
                        color: #ccc;
                    }
                    margin-right:8px;
                }
                .text{
                    position: relative;
                    line-height:20px;
                    .show-text{
                        position: absolute;
                        left: 0;
                        top:0;
                        opacity: 0;
                        z-index: -1;
                    }
                }
            }
        }
        li{
            padding: 0 15px;
            line-height: 30px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            cursor: pointer;
            &:hover{
                background-color: #efefef;
            }
            &.hover{
                background-color: #efefef;
            }
            &.active{
                background-color: #5795f1;
                color: #fff;
            }
        }
    }
}

.sub-right-item{
    .item-head{
        height: 46px;
        line-height:46px;
        padding: 0 15px;
        color: #000;
        .flex(space-between,stretch);
        border-bottom:1px solid #e7ecf2;
        span{
            position: relative;
            padding: 0 10px;
            &::after{
                position: absolute;
                content: '';
                height: 2px;
                left:0;
                bottom: 0;
                right:0;
                background: #5795f1;
            }
        }
    }
    .recharge-know{
        margin: 30px 60px;
        border: 1px solid #d5e8fc;
        background-color: #eaf4fe;
        padding: 15px 20px;
        .know-head{
            color: #333;
        }
        .know-text{
            font-size: 12px;
            line-height:24px;
        }
    }
}
.withdraw-form{
    padding-top:25px;
    .form-item{
        .flex(flex-start,center);
        padding: 12px 30px;
        .label{
            text-align: right;
            width: 120px;
        }
        .price-tag{
            color: red;
        }
        .input-text{
            height: 38px;
            line-height: 36px;
            border: 1px solid #dddddd;
            border-radius: 3px;
            padding: 0 10px;
            width: 350px;
            &:focus{
                border-color: #067eee;
                box-shadow: 0 0 3px rgba(6,140,252,0.3);
            }
            &.input-code{
                width: 230px;
                border-radius: 3px 0 0 3px;
            }
        }
        .get-code{
            height: 38px;
            text-align: center;
            border: none;
            background: #5795f1;
            color: #fff;
            line-height:38px;
            width: 120px;
            border-radius: 0 3px 3px 0;
            cursor: pointer;
            &:hover{
                background: #4a79c7;
            }
            &[disabled=disabled]{
                cursor: not-allowed;
                background-color: #9397b2;
            }
        }
        .input-control{
            margin-right:12px;
            .flex(center,center);
        }
        .add-card{
            .flex(center,center);
        }
        .fees{
            line-height:19px;
            font-size: 12px;
        }
        .submit-btn{
            height: 38px;
            background-color: #5495f3;
            color: #fff;
            text-align: center;
            border: none;
            border-radius: 3px;
            line-height:38px;
            cursor: pointer;
            outline: none;
            min-width: 100px;
            padding: 0 15px;
            &:hover{
                background-color: #4279c4;
            }
        }
    }
}

.order-cont{
    padding: 0 20px;
}
.my-order{
    padding: 20px 0;
}
.order-head{
    padding: 15px 0 0;
    .flex(space-between,center);
    border-bottom: 1px solid #efefef;
    .order-nav{
        .flex();
        li{
            .flex();
            a{
                padding: 10px 15px;
                position: relative;
            }
            a.active{
                color: @headAHoverColor;
                &::after{
                    position: absolute;
                    left: 0;
                    right: 0;
                    height: 3px;
                    background-color: @headAHoverColor;
                    content: '';
                    bottom: -1px;
                    z-index: 2;
                }
            }
            a:hover{
                color: @headAHoverColor;
            }
        }
    }
    .currency-type{
        .flex();
        .select-list{
            margin: 0 5px;
        }
        .search-input{
            height: 32px;
            width: 80px;
            border: 1px solid #dddddd;
            border-radius: 3px;
            line-height: 30px;
            padding: 0 20px 0 10px;
            &:focus{
                border-color: #067eee;
                box-shadow: 0 0 3px rgba(6,140,252,0.3);
            }
        }
        .search-btn{
            height: 32px;
            line-height: 32px;
            padding: 0 15px;
            min-width: 60px;
            color: #fff;
            border-radius: 3px;
            text-align: center;
            background-color: #067eee;
            outline: none;
            &:hover{
                background-color: #065dba;
            }
        }
    }
}
.order-list-table{
    .table-item{
        margin-top: 20px;
    }
}

#google-verification{
    margin: 30px 120px 0;
}

body .layer-special .layui-layer-title{
    background:#067eee url(../images/basic/c2-head-01.jpg) no-repeat center bottom;
    color:#fff;
    border: none;
    text-indent: -99999em;
    overflow: hidden;
}
body .layer-special .layui-layer-setwin .layui-layer-close1{
    background: url(../images/basic/close.png) no-repeat center center;
}
body .layer-special .layui-layer-btn{border-top:1px solid #E9E7E7}
body .layer-special .layui-layer-btn a{background:#333;}
body .layer-special .layui-layer-btn .layui-layer-btn1{background:#999;}


.layer-modal-form{
    display: none;
}


@media (max-width: 1600px){
    .trade-center .trade-right-bottom .online-trade .tab-item{
        flex-wrap: wrap;
    }
    .trade-center .trade-right-bottom .online-trade .tab-item .trade-behavior{
        width: 100%;
    }
    .trade-center .trade-right-bottom .online-trade .tab-item .trade-behavior.buy{
        margin-right:0;
    }
    .trade-center .trade-right-bottom .online-trade .tab-item .trade-behavior.sell{
        margin-left:0;
    }
}
@media (max-width: 1440px){
    .k-line-chart .k-line-chart-head span{
        font-size: 14px;
    }
    .header-left li{
        margin: 0 20px;
    }
}
@media (max-width: 1200px){
    .header-left li{
        margin: 0 20px;
    }
    .trade-center .trade-left{
        width: 360px;
    }
    .delegate{
        display: none;
    }
}



.column-list{
    .table tr{
        td{
            background: #fdfeff;
            text-align: left;
            padding: 0 15px;
            line-height: 38px;
        }
        td:first-of-type{
            background: #f2f6fe;
            color: #333;
            width: 50%;
            border: 1px solid #d6e2fc;
            text-align: right;
        }
        .column-input{
            width: 100%;
        }
    }
}


.broker-promotion{
    &-top{
        padding: 20px 0 30px;
    }
    &-item{
        .flex(center);
        line-height: 40px;
        .label{
            width: 150px;
            text-align: right;
        }
        .text{
            width: 570px;
            .flex(flex-start,center);
        }
    }
    .table{
        table-layout: fixed;
        //.special-table-start{
        //    text-align: left;
        //    padding-left: 25px;
        //}
        //.special-table-end{
        //    text-align: right;
        //    padding-right: 25px;
        //}
    }
    .invite-code{
        .label{
            font-size: 16px;
            color: #000;
        }
        .text{
            color: #5895f2;
            font-weight: bold;
            font-size: 16px;
        }
    }
    .invite-link{
        .label{
            font-size: 14px;
            color: #9194a4;
        }
        .link-input{
            height: 38px;
            flex: auto;
        }
        input{
            width: 100%;
            height: 38px;
            line-height: 36px;
            border: 1px solid #e9eff5;
            border-radius: 3px;
            padding: 0 10px;
            background-color: #e9eff5;
        }
    }
    .income-detail{
        .flex();
        flex-wrap: wrap;
        &-item{
            width: 50%;
            .name,.value{
                width: 50%;
            }
            .name{
                text-align: right;
                font-size: 14px;
                color: #000;
            }
            .value{
                font-size: 12px;
                color: #666;
                .num{
                    color: #76a5f4;
                    font-size: 16px;
                }
            }
            .flex(center,center);
        }
    }
}


.asset-account{
    padding: 20px;
    &-list{
        .flex(flex-start);
        flex-wrap: wrap;
        border-bottom: 1px solid #e7ecf2;
        padding-bottom: 20px;
        a{
            font-size: 14px !important;
            margin-left: 0 !important;
            margin-right: 6px;
            margin-bottom: 6px;
            &.active{
                background-color: #5795f1;
                color: #fff;
            }
        }
    }
    &-btn{
        .flex(flex-start);
        padding-top: 20px;
        a{
            width: 260px;
            height: 150px;
            text-align: center;
            background-color: #e9eff5;
            border-radius: 8px;
            border: 1px dotted #c1cddb;
            .flex(center);
            .icon{
                color: #8eb7f2;
                .iconfont{
                    font-size: 40px;
                }
            }
        }
    }
}